<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section class="day001 web-font">
    <h4>进化史</h4>
    <ul>
        <li>在es6出来之前 服务器端使用CommonJS, 浏览器端使用AMD</li>
        <li>简单罗列require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行</li>
        <li><a href="https://blog.csdn.net/xiasohuai/article/details/86541632">import和require的区别</a></li>
    </ul>
    <ul>
        <li>自定义webpack</li>
        <li>定义Webpack类</li>
        <li>读取配置webpack.config.js</li>
        <li>分析入口文件，借助@babel/parser得到抽象语法树</li>
        <li>借助@babel/traverse提取依赖文件</li>
        <li>生成单个分析对象</li>
        <li>生成所有分析对象</li>
        <li>生成打包后的文件，写出require函数，并在入口使用require('入口文件')</li>
    </ul>
    <ul>
        <li>webpack优化</li>
        <li>loader、plugin、webpack打包流程</li>
        <li>vue、react开启热更新？</li>
        <li>es6语法（@babel/preset-env），es6特性（@/babel/polyfill）</li>
        <li>-D -S</li>
        <li>npx browserslist "last 2 versions, > 1%" 查看浏览器版本</li>
        <li>script下的命令参数和命令原理</li>
        <li>chunk chunks(一个入口，一个chunks) bundle</li>
        <li>hash(一个chunks变了，其它chunks的打包出来的也会变化)</li>
        <li>chunkhash(影响范围是一个chunks，虽然处于同一个chunks中，但是一个模块的内容变化，也会影响同chunks下的另外模块变化)</li>
        <li>contenthash(基于chunkhash的基础上，处理一个模块变化，只会影响父亲模块变化，不会影响不相关模块的变化)</li>
        <li>为什么每个文件的hash都不一样</li>
        <li>source-map</li>
        <li>[inline-|hidden-|eval-][nosources-][cheap-[module-]]-source-map</li>
        <li>以下以打包出来的某个js文件为例，如home.js，出现报错情况：</li>

        <li>单独的source-map选项 （外部）会生成一个外连的source-map文件，调试能追踪源代码</li>
        <li>加cheap （外部）会生成一个外连的source-map文件，调试能追踪源代码，只能精确到行，不能到列</li>
        <li>加module （外部）会生成一个外连的source-map文件，调试能追踪源代码，会将loader的source-map加入，比如使用了es6语法的也可以追踪到源文件</li>
        <li>加hidden （外部）会生成一个外连的source-map文件，调试不能追踪源代码，连目录都看不到</li>
        <li>加nosoursce （外部）会生成一个外连的source-map文件，调试不能追踪源代码，可以看到目录</li>
        <li>加inline （内部）会在home.js结尾生成source-map代码，调试能追踪源代码</li>
        <li>加eval （内部）会在home.js依赖的每个文件生结尾生成source-map代码，调试能追踪源代码</li>
        <li>单独的eval选项 （内部）会在home.js依赖的每个文件生结尾生成source-map代码，调试能追打包后的代码，不能追踪源代码</li>
        <li>开发环境建议source-map或cheap-module-source-map</li>
    </ul>
    <p>
        beforeRun
        run
        beforeCompile
        compile
            --compilation产生
        make
            addEntry
                _addEntryItem
                    addModuleTree
                        handleModuleCreation
                            factorizeModule(参数1,, callback) -> this.factorizeQueue.add
                                (callback中)addModule -> this.addModuleQueue.add
                                    _handleModuleBuildAndDependencies
                                        buildModule -> _buildModule
                                            module.build
                                                NormalBuild.build
                                                    NormalBuild.doBuild
                                                        runLoaders
        finishMake
        afterCompile

        @babel/parser     转换成抽象语法树
        @babel/transverse 遍历抽象语法树
        @babel/generator  生成
        babel-types       修改抽象语法树

        合并参数
        webpack
        Compiler
        在Compiler的钩子函数上注册插件
        找到入口函数开始编译
        加载资源文件，并使用响应的loader处理
        处理结果利用babel的抽象语法树功能转换，分析依赖
        遍历依赖
        得到最终的依赖对象
        组装模块
        写入文件

        compiler和compilation
        抽象语法树的解析
        同步钩子和异步钩子
        loader和plugin

        丁香结
        冰冠公主
        偶像歌手
        死神来了
        幻想奇妙夜
        达摩拳王（没有）
        嬴政、赵云
    </p>
</section>
</body>
</html>